<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <!-- 插槽更多见test05.html -->
  <!--
  1.插槽的基本使用,<slot></slot>
  2.插槽的默认值,<slot>button</slot>
  3.如果有多个值,同时放进组件,一起替换
  4.若使有多个插槽,应该对插槽命名 <slot name="slotName"></slot> ,使用的时候根据 slot="slotName" 标签操作对于的插槽
  -->
  <cpn></cpn>
  <cpn>
    <!-- 获取子组件的planguages -->
    <template slot-scope="slot">
      <!--      <span v-for="item in slot.data">{{item}} - </span>-->
      <span>{{slot.data.join(" - ")}}</span>
    </template>
  </cpn>
  <cpn>
    <!-- 获取子组件的planguages -->
    <template slot-scope="slot">
      <!--      <span v-for="item in slot.data">{{item}} * </span>-->
      <span>{{slot.data.join(" * ")}}</span>
    </template>
  </cpn>
</div>
</body>
<template id="cpn">
  <div>
    <!-- :data="pLanguages" 插槽中加入子组件的数据
    这里的 data 名称是任意取的,在外面拿这个值的时候也要根据这个名字拿 -->
    <slot :data="pLanguages">
      <ul>
        <li v-for="item in pLanguages">{{item}}</li>
      </ul>
    </slot>
  </div>
</template>
<script src="../js/vue.js"></script>
<script>
  var app = new Vue({
      el: "#app",
      data: {
        tittle: "abc",
      },
      components: {
        cpn: {
          template: "#cpn",
          data() {// 组件里的data是函数,这个函数返回对象,对象里存放数据
            return {
              pLanguages: ["Go", "Java", "C", "C++", "Python", "JS"]
            }
          },
        }
      }
    })
  ;
</script>
</html>